<template>
  <div style="background: #f5f5f5;">
    <pageTop :text="text"></pageTop>
    <div @click="blank">
      <slideBar></slideBar>
      <div style="margin-bottom: 10vw">
        <div class="contactImg">
          <img src="../assets/join us.png" alt="">
          <p class="line"></p>
          <p class="text">JOIN US</p>
        </div>
        <div class="clear"></div>
        <div class="infomation">
          <p class="title">招聘信息</p>
          <router-link :to="{name:'recruitDetail',params:{recruit_id:v.id}}" v-for="(v,i) in recruitList" :key="i">
            <p>{{v.title}} <span>招聘{{v.number}}人</span></p>
          </router-link>

        </div>
      </div>

      <gotop></gotop>
    </div>
    <pageBottom></pageBottom>
  </div>
</template>

<script>
  import pageTop from '../components/pageTop'
  import slideBar from '../components/slideBar'
  import gotop from '../components/public/goTop'
  import pageBottom from '../components/pageBottom'
  export default {
    name: "contactUs",
    components:{
      pageTop,
      slideBar,
      gotop,
      pageBottom,
    },
    data(){
      return{
        text:'加入我们',
        recruitList:[],
      }
    },
    created(){
      var that=this;
      this.$http({
        url:'/offcial/index.php/index/Acticle/Recruit',
        method:'post',
        data:{
          time:this._globe.time1,
          device_id:this._globe.device_id,
          version:this._globe.version,
          platform:this._globe.platform,
          token:this._globe.token1,
        }
      })
        .then(function (response) {
          console.log(response);
          const resData=response.data;
          if(resData.code==1){
            that.recruitList = resData.data;
            console.log(that.recruitList);
          }
        })
        .catch(function (response) {
          console.log(response);
        })
    },
    methods:{
      blank(){
        $("#containers").css(
          {"transform":"translateX(0vw)","transition":"transform .5s"});
      },
      menu(){
        $("#containers").css(
          {"transform":"translateX(72vw)","transition":"transform .5s"});
      }
    },
  }
</script>

<style scoped lang="scss">
  .contactImg{
    width: 100vw;
    height: 48vw;
    img{
      width: 100%;
      height: 100%;
    }
    .text{
      width: 33%;
      height: 17.33vw;
      font-size: 34px;
      color: #fff;
      position: absolute;
      left: 11.5vw;
      top: 23.5vw;
      text-align: left;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding-left: 1vw;
      float:left;
    }
    .line{
      float: left;
      width: 1vw;
      height: 19.33vw;
      border-right: 4px solid #fff;
      position: absolute;
      top: 25vw;
      border-radius: 1px;
      left: 9vw;
    }
  }
  .infomation{
    width: 100vw;
    height: auto;
    background: #fff;
    margin-top: 5vw;
    p{
      width:100vw;
      height: 13.6vw;
      border-bottom: 1px solid #f5f5f5;
      line-height: 13.6vw;
      font-size: 15px;
      text-align: left;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding-left: 5vw;
      padding-right: 5vw;
      color: #666;
        span{
          float: right;
        }
    }
    .title{
      font-size: 28px;
      color: #333;
      font-weight: bold;
      text-align: left;
      padding-left: 5vw;
      width: 100vw;
      line-height: 16vw;
      border-bottom: 1px solid #f5f5f5;
      height: 16vw;
    }
  }
</style>
